<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link href="css/iconfont.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
		</script>

		<!-- 页面标题 -->
		<header class="mui-bar mui-bar-nav">
			<span id="refresh" class="mui-icon mui-icon-reload mui-pull-left"></span>
			<h1 class="mui-title">My实验室</h1>
			<span id="addLab" class=""></span>
			<span id="scan" class=""></span>
		</header>
		<div class="mui-content" id="muicontent">
			<ul class="mui-table-view">
				<!-- 显示一个小空白 -->
			</ul>
			
			<!-- 签退按钮 -->
			<button id="labQiantui" type="button" class="mui-btn mui-btn-warning" style="color:black;width:100%;display:none;">签退</button>
			<button id="pcQiantui" type="button" class="mui-btn mui-btn-warning" style="color:black;width:100%;display:none;">签退</button>

			<!-- 实验室列表 -->
			<ul class="mui-table-view" id="labList">
				<!-- 通过AJAX加载实验室列表 -->
			</ul>

			<div class="mui-content-padded" style="text-align:center;">
				<p>
					已显示全部
				</p>
			</div>

		</div>
	</body>
	<script type="text/javascript">
		window.addEventListener('refresh1', function(e) {
				window.location.reload();
		})
		window.addEventListener('refresh2', function(e) {
			
			setTimeout(function (){
				window.location.reload();
				
			}, 1000);
		})
		//加载用户状态,并保存到本地
		$.ajax({
			//请求方式
			type: 'POST',
			url: serverUrl + "status",
			data: {
				account: localStorage.getItem("account"),
				password: localStorage.getItem("password")
			},
			//请求成功
			success: function(data) {
				localStorage.setItem("qiandao",data);
			}, 
			//请求失败，包含具体的错误信息
			error: function(e) {
				mui.toast("遇到了未知错误！");
			}
		});
		// 判断是学生用户还是教师用户，是否显示管理员功能
		if( localStorage.getItem("teacher") == "true" ){
			document.getElementById("addLab").classList.add("mui-icon");
			document.getElementById("addLab").classList.add("mui-icon-plusempty");
			document.getElementById("addLab").classList.add("mui-pull-right");
		} else{
			document.getElementById("scan").classList.add("mui-icon");
			document.getElementById("scan").classList.add("iconfont");
			document.getElementById("scan").classList.add("icon-saoyisao");
			document.getElementById("scan").classList.add("mui-pull-right");
		}
		// 根据本地保存的签到信息显示签退按钮
		var flagQiandao = localStorage.getItem("qiandao");
		if(flagQiandao == '"inLab"'){
			document.getElementById("labQiantui").style.display="inline";
			document.getElementById("pcQiantui").style.display="none";
		} else if(flagQiandao == '"onComputer"'){
			document.getElementById("labQiantui").style.display="none";
			document.getElementById("pcQiantui").style.display="inline";
		}
		
		// 获取实验室列表
		$.ajax({
			//请求方式
			type: 'POST',
			dataType: 'json',
			url: serverUrl + "labList",
			data: {
				account: localStorage.getItem("account"),
				password: localStorage.getItem("password")
			},
			//请求成功
			success: function(data) {
				// 将json转化为列表项
				var strLabList = "";
				for (var i = 0; i < data.labList.length; i++) {
					strLabList = strLabList + "<li class='mui-table-view-cell' id='" + data.labList[i].labID +
						"' labName='" + data.labList[i].labName + data.labList[i].labNum +
						"' quanxian='false' description='"+ data.labList[i].description +"'>" + //给标签添加一个权限属性，在点击该标签时判断是否可进入
						data.labList[i].labName + data.labList[i].labNum +
						"<span class='mui-badge' id='span" + data.labList[i].labID + "'>&nbsp;&nbsp;</span></li>";
				}
				// 将可以进入的实验室状态设为success
				document.getElementById("labList").innerHTML = strLabList;
				for (var i = 0; i < data.privelageList.length; i++) {
					document.getElementById(data.privelageList[i]).setAttribute("quanxian", "true");
					document.getElementById("span" + data.privelageList[i]).innerHTML = data.labList[i].studentNumber;
					document.getElementById("span" + data.privelageList[i]).classList.add("mui-badge-success");
				}
			},
			//请求失败，包含具体的错误信息
			error: function(e) {
				mui.toast("遇到了未知错误！");
			}
		});
		// 点击按钮刷新页面
		document.getElementById("refresh").onclick = function(){
			location.reload();
		}
		//点击按钮添加实验室
		document.getElementById("addLab").onclick = function(){
			mui.openWindow({
				url: "addLab.html",
				createNew: false, //不允许重复创建
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				}
			});
		}
		//点击扫码按钮
		document.getElementById("scan").onclick = function(){
			mui.openWindow({
				url: "scan.html",
				createNew: false, //不允许重复创建
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				}
			});
		}
		// 点击签退实验室按钮
		document.getElementById("labQiantui").onclick = function(){
			mui.openWindow({
				url: "labQiantui.html",
				createNew: false, //不允许重复创建
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				}
			});
		};
		// 点击签退电脑按钮
		document.getElementById("pcQiantui").onclick = function(){
			mui.openWindow({
				url: "pcQiantui.html",
				createNew: false, //不允许重复创建
				show: {
					autoShow: true,
					aniShow: "slide-in-right",
					duration: 100
				}
			});
		};
		
		// 点击实验室跳转页面
		mui(".mui-content").on("tap", ".mui-table-view-cell", function(e) {
			var labID = this.getAttribute("id");
			var description = this.getAttribute("description");
			var info = document.getElementById("info");

			if (this.getAttribute("quanxian") == "false") { //如果点击的是可申请的实验室,则打开申请对话框

				// 申请对话框
				mui.prompt(this.getAttribute("labName"), '申请理由', '申请', ['取消', '确定'], function(e) {
					if (e.index == 1) {
						var apply = {
							"LabMessage": {
								"applyTime": "666",
								"labID": labID,
								"messageID": 4,
								"messageInf": e.value,
								"replyTime": "789",
								"responseInf": "",
								"result": 0,
								"studentID": JSON.parse(localStorage.getItem("userInformation")).userID,
								"teacherID": 2
							},
							"student": {
								"account": JSON.parse(localStorage.getItem("userInformation")).account,
								"className": JSON.parse(localStorage.getItem("userInformation")).className,
								"name": JSON.parse(localStorage.getItem("userInformation")).userName,
								"password": localStorage.getItem("password"),
								"teleNumber": JSON.parse(localStorage.getItem("userInformation")).teleNumber,
								"userID": JSON.parse(localStorage.getItem("userInformation")).userID
							}
						};

						$.ajax({
							//请求方式
							type: 'POST',
							dataType: 'json',
							url: serverUrl + "Apply",
							headers: {
								'Content-Type': 'application/json;charset=utf-8'
							},
							data: JSON.stringify(apply),
							//请求成功
							success: function(data) {
								if (data == "success") {
									mui.toast("发送成功！");
								} else{
									mui.toast(data);
								}
							}, 
							//请求失败，包含具体的错误信息
							error: function(e) {
								mui.toast("遇到了未知错误！");
							}
						});
					}
				}, 'div');
			}else if (this.getAttribute("quanxian") == "true") { //如果点击的是已申请成功的实验室,则打开实验室界面
				mui.openWindow({
					url: "detailLab.html",
					extras: { //给子页面传值
						labID: labID,
						description: description
					},
					createNew: false, //不允许重复创建
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					}
				});
			}
		});
	</script>
</html>
